import { Component, PropsWithChildren } from 'react'
import { View, Text, Image } from '@tarojs/components'
import { AtButton } from 'taro-ui'
import Taro from '@tarojs/taro'

import "taro-ui/dist/style/components/button.scss"
import './index.scss'
import welcomePageImg from '../../assets/imgs/welcomePage.jpg'

export default class Index extends Component<PropsWithChildren> {
  
  handleGoToKitchen = () => {
    Taro.navigateTo({
      url: '/pages/kitchen/index'
    })
  }

  render () {
    return (
      <View className='index-container'>
        <View className='animated-background'>
          <View className='floating-icons'>
            <Text className='float-icon' style={{animationDelay: '0s'}}>🥕</Text>
            <Text className='float-icon' style={{animationDelay: '1s'}}>🍅</Text>
            <Text className='float-icon' style={{animationDelay: '2s'}}>🥬</Text>
            <Text className='float-icon' style={{animationDelay: '0.5s'}}>🧄</Text>
            <Text className='float-icon' style={{animationDelay: '1.5s'}}>🥒</Text>
            <Text className='float-icon' style={{animationDelay: '2.5s'}}>🌶️</Text>
          </View>
        </View>
        
        <View className='content-overlay'>
          <View className='hero-section'>
            <View className='hero-content'>
              <View className='app-logo-container'>
                <Text className='logo-emoji'>🍳</Text>
                <View className='logo-glow'></View>
              </View>
              <Text className='app-title'>
                <Text className='title-main'>厨房助手</Text>
                <Text className='title-sub'>Kitchen Helper</Text>
              </Text>
            </View>
          </View>
          
          <View className='features-showcase'>
            <View className='feature-grid'>
              <View className='feature-card primary'>
                <View className='feature-icon-container'>
                  <Text className='feature-icon'>📊</Text>
                  <View className='icon-pulse'></View>
                </View>
                <Text className='feature-title'>食材追踪</Text>
                <Text className='feature-desc'>实时监控食材状态，智能分类管理</Text>
                <View className='feature-preview'>
                  <View className='preview-item'>
                    <Text className='preview-dot active'></Text>
                    <Text className='preview-text'>12 种新鲜食材</Text>
                  </View>
                </View>
              </View>
              
              <View className='feature-card secondary'>
                <View className='feature-icon-container'>
                  <Text className='feature-icon'>⏰</Text>
                  <View className='icon-pulse'></View>
                </View>
                <Text className='feature-title'>过期提醒</Text>
                <Text className='feature-desc'>提前预警，避免食材浪费</Text>
                <View className='feature-preview'>
                  <View className='preview-item'>
                    <Text className='preview-dot warning'></Text>
                    <Text className='preview-text'>3 项即将过期</Text>
                  </View>
                </View>
              </View>
              
              <View className='feature-card accent'>
                <View className='feature-icon-container'>
                  <Text className='feature-icon'>📈</Text>
                  <View className='icon-pulse'></View>
                </View>
                <Text className='feature-title'>智能统计</Text>
                <Text className='feature-desc'>数据可视化，掌握厨房动态</Text>
                <View className='feature-preview'>
                  <View className='mini-chart'>
                    <View className='chart-bar' style={{height: '60%'}}></View>
                    <View className='chart-bar' style={{height: '80%'}}></View>
                    <View className='chart-bar' style={{height: '45%'}}></View>
                  </View>
                </View>
              </View>
              
              <View className='feature-card success'>
                <View className='feature-icon-container'>
                  <Text className='feature-icon'>⚡</Text>
                  <View className='icon-pulse'></View>
                </View>
                <Text className='feature-title'>快速添加</Text>
                <Text className='feature-desc'>一键录入，简单高效</Text>
                <View className='feature-preview'>
                  <View className='quick-add-demo'>
                    <Text className='plus-icon'>+</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
          
          <View className='cta-section'>
            <View className='cta-content'>            
              <View className='action-buttons'>
                <AtButton 
                  type='primary'
                  size='normal'
                  onClick={this.handleGoToKitchen}
                  className='main-cta-button'
                >
                  <Text className='button-text'>立即开始</Text>
                  <Text className='button-arrow'>→</Text>
                </AtButton>
                
                <View className='secondary-actions'>
                  <View className='stat-item'>
                    <Text className='stat-number'>1000+</Text>
                    <Text className='stat-label'>用户信赖</Text>
                  </View>
                  <View className='stat-item'>
                    <Text className='stat-number'>85%</Text>
                    <Text className='stat-label'>减少浪费</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
